<template>
  <div class="list">
    <my-head title="列表" :back="false"></my-head>
    <div class="list-box">
      <div class="bleft">
        <van-sidebar v-model="active">
          <van-sidebar-item
            :title="l.text"
            :name="i"
            v-for="(l, i) in types"
            :key="i"
          />
        </van-sidebar>
      </div>
      <div class="bright">
        <clist v-if="active == 0" :goods="goods"></clist>
        <clist
          v-else
          :goods="
            goods.filter((item) => item.type.value == types[active].value)
          "
        ></clist>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      goods: [],
      types: [
        {
          text: "全部",
          value: "all",
        },
      ],
    };
  },
  methods: {
    async findGoods() {
      let res = await this.$ajax.findGoods();
      var obj = {};
      this.goods = res;

      for (var i = 0; i < res.length; i++) {
        var item = res[i];
        if (!obj[item.type.text]) {
          obj[item.type.text] = item.type.text;
          this.types.push(item.type);
        }
      }
      console.log(this.types);
    },
  },
  mounted() {
    this.findGoods()
  },
};
</script>


<style lang="scss" scoped>
.list{
    width:100%;
    .list-box{
        display: flex;
        height:calc(100vh - 100px);
        overflow: hidden;
        .bleft{
            flex-shrink: 0;
        }
        .bright{
          width: 100px;
            flex:1;
            overflow: auto;
           
        }
    }
}
</style>